<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */

get_header(); ?>
<style type="text/css">
.width_contact_70{
	width:70px;
}
.width_contact_100{
	width:100px;
}
</style>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.validate.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.updnWatermark.js" type="text/javascript"></script>
<style type="text/css">
.updnWatermark{
	height: 26px;
    line-height: 26px;
    padding: 8px 0 0 0;
    color: #131E43 !important;
    font-size: 18px;    
}
.bg_alert {
	width:270px;
	height:115px;
	background:url("<?php echo get_template_directory_uri(); ?>/images/bg_alert.png") no-repeat top left;
	margin:0px auto;
	padding:15px 0px 0px 83px;
	color:#000;
}
div.bg_alert #alert{
	margin:0; 
	padding:10px 25px 0 10px; 
	min-height:60px;
	font-size: 12px;
}
.bg-overlay {
    background: url("<?php echo get_template_directory_uri(); ?>/images/bg1.png") repeat scroll 0 0 transparent;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.wpcf7-mail-sent-ok{
	color:#FFFFFF;
	padding-left:30px;
	font-weight:500;
}
</style>
<!--Popup-->
<div class="bg_alert" id="show_popup" style="display:none; position: fixed; top: 35%; left: 50%; z-index:10001; margin-left:-140px;"> <span id="f_focus" style="display:none;"></span>
  <div id="alert"></div>
  <div style="padding-left: 40px;"><a href="javascript:void(0);" onClick="close_popup();">
  	<!-- <img src="<?php //echo get_template_directory_uri(); ?>/images/bt_luk1.png" alt="" /> -->
  	<input type="button" value="Close">
  </a></div>
</div>

<div id="bg-overlay" class="bg-overlay" style="display:none"></div>
<!--End Popup--> 
		<div id="mainContent">
            <div class="container_12">
                <div class="grid_12">
                    <div class="ChoiceSection">
<!--                         <img src="<?php //echo get_template_directory_uri(); ?>/images/pictures/img01.png" alt="Image" /> -->
                        <!-- Slide -->
                        <img class="slide"  style="display: none;" src="<?php echo get_template_directory_uri(); ?>/images/pictures/banner1.png" alt="Image" />
                        <img class="slide" src="<?php echo get_template_directory_uri(); ?>/images/pictures/banner2.png" alt="Image" />
                        
                        <script type="text/javascript">
                        jQuery(document).ready(function(){
                        	changeImage();
                        });

                        function changeImage() {
                        	jQuery('.slide').toggle();
                        	setTimeout("changeImage()", 5000);
                        }
                        </script>
                        <!-- END SLIDE -->
                        <div class="ChoiceHour">
                            <div class="Para01 M48top">
                                <div class="Picture">1</div>
                                <div class="Description">                                    
                                    <?php
										$my_id = 16;
										$post = get_post($my_id);
										echo '<p>'.$post->post_title.'</p>';
										echo '<p>'.$post->post_content.'</p>';								
									?>                                    
                                </div>
                            </div>
                            <div class="Para01 M48top">
                                <div class="Picture">2</div>
                                <div class="Description">
                                    <p>
                                    <?php
										$my_id = 18;
										$post = get_post($my_id);
										echo '<p>'.$post->post_title.'</p>';
										echo '<p>'.$post->post_content.'</p>';								
									?>
                                    </p>
                                </div>
                            </div>
                            <div class="Para01 M48top">
                                <div class="Picture">3</div>
                                <div class="Description">
                                    <p>
                                    <?php
										$my_id = 20;
										$post = get_post($my_id);
										echo '<p>'.$post->post_title.'</p>';
										echo '<p>'.$post->post_content.'</p>';								
									?>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="ChoiceSelect">
                            <h2 class="TextQuote"><img src="<?php echo get_template_directory_uri(); ?>/images/dummy.gif" class="uiText initText" alt=""/></h2>

                            <ul class="ListQuote M28top">
                            	<?php
                            		echo do_shortcode('[contact-form-7 id="58" title="Contact on home page"]'); 
                            	?> 
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                
                <div class="GrayBack">
                    <div class="grid_12">
                        <div class="Para02 M20left">
                            
                            <div class="Description">
	                            <?php
									$my_id = 1;
									$post = get_post($my_id);								
								?>
                                <h3><?php echo $post->post_title?></h3>
                                <p>
                                <?php
                                	echo $post->post_content 
                                ?>
                                </p>
                            </div>
                            <div class="Picture">
                               <?php
									 if (has_post_thumbnail( $my_id )){
										$image = wp_get_attachment_image_src( get_post_thumbnail_id( $my_id ), 'single-post-thumbnail' );
										echo '<img src="'.$image[0].'" alt="" width="157" height="300"/>';
									} 
							   ?>	
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="EndGrayBack"></div>
            </div>
            
        </div><!-- #primary -->

<script>
$(document).ready(function() {
$.updnWatermark.attachAll();//-- use for testing empty data in contact form

$(".wpcf7-form").addClass("frm-contact");
$("form.frm-contact").validate({
	
	errorPlacement: function(error, element) {			
	},
	invalidHandler: function(form, validator) {
	  var errors = validator.numberOfInvalids();
	  if (errors) {
		$('#alert').html(validator['errorList'][0]['message']);
		$('#bg-overlay').show();
		$('#show_popup').show();
		$('#f_focus').html(validator['errorList'][0]['element'].name);
		validator['errorList'][0]['element'].focus();
	  } else {
	  }
	},
	rules: {
		txtfrom : "required",
		txtto : "required",
		txtname : "required",
		txtphone : "required",
	},
	messages: {
		txtfrom: "Please input from",
		txtto: "Please input to",
		txtname: "Please input name",
		txtphone: "Please input phone",			
	}
});
close_popup=function(){		
	var fel=$('#f_focus').html();
	$('#bg-overlay').hide();
	$('#show_popup').hide();
	$('#' + fel ).focus();
};

click_send=function(){
	document.getElementById('send').click();
}
});

</script>	
<?php get_footer(); ?>